<template>
	<view class="classList">
		<view class="loadingLayout" v-if="!classList.length && !noData">
			<uni-load-more status="loading"></uni-load-more>
		</view>
		<view class="content">
			<navigator :url="`/pages/preview/preview?id=${item._id}`" class="item" v-for="item in classList"
				:key="item._id">
				<image :src="item.smallPicurl" mode="aspectFill"></image>
			</navigator>
		</view>
		<view class="loadingLayout" v-if="classList.length || noData">
			<uni-load-more :status="noData? 'noMore':'loading'"></uni-load-more>
		</view>
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		apiGetWallist,
		apiGetUserWallist
	} from '@/api/api.js'
	import {
		onLoad,
		onReachBottom,
		onShareAppMessage,
		onShareTimeline,
		onUnload
	} from '@dcloudio/uni-app'
	import {
		gotoHome
	} from '@/utils/common.js'
	const classList = ref([])
	const noData = ref(false)

	const queryParams = {
		pageNum: 1,
		pageSize: 12
	}

	let pageName;

	const getClassList = async () => {
		let res
		if (queryParams.classid) {
			res = await apiGetWallist(queryParams)
		} else {
			res = await apiGetUserWallist(queryParams)
		}

		classList.value = [...classList.value, ...res.data]
		if (res.data.length < queryParams.pageSize) {
			noData.value = true
		}
		uni.setStorageSync("storageClassList", classList.value)
	}

	onLoad((e) => {
		const {
			id = null, name = null, type = null
		} = e
		if (type) {
			queryParams.type = type
		} else {
			if (id) {
				queryParams.classid = id
			} else {
				gotoHome()
				return
			}
		}


		pageName = name

		console.log('get params', id, pageName)
		uni.setNavigationBarTitle({
			title: pageName
		})
		getClassList()
	})

	onUnload(() => {
		uni.removeStorageSync("storageClassList")
	})

	onReachBottom(() => {
		if (noData.value) return
		queryParams.pageNum++
		getClassList()
	})
	// 分享给好友
	onShareAppMessage((e) => {
		return {
			title: '咸虾米-' + pageName,
			path: `/pages/classList/classList?id=${queryParams.classid}&name=${pageName}`
		}
	})
	// 分享到朋友圈
	onShareTimeline(() => {
		return {
			title: '咸虾米-' + pageName,
			query: `id=${queryParams.classid}&name=${pageName}`
		}
	})
</script>

<style lang="scss" scoped>
	.classList {
		.content {
			display: grid;
			gap: 5rpx;
			grid-template-columns: repeat(3, 1fr);
			padding: 5rpx;

			.item {
				height: 440rpx;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
</style>